<template>
  <view class="page-loading" :style="{height: height}">
    <view class="loading" v-if="!showPage" :style="{height: height}">
      <view class="flex" v-if="error">
        <u-icon name="info-circle-fill" size="100" color="#FBD220"></u-icon>
        <text class="text mt-20">网络连接超时！</text>
        <view class="flex btn-retry" @click="onRetry"><text>点击重试</text></view>
      </view>
      <view class="flex" v-else>
        <image class="icon" :src="icon"></image>
        <text class="text">{{text}}</text>
      </view>
    </view>
    <block v-if="mode === 'show'">
      <view v-show="showPage" :class="{show: showPage && animation}" :style="{height: height}">
        <slot></slot>
      </view>
    </block>
    <block v-if="mode === 'if'">
      <view v-if="showPage" :class="{show: showPage && animation}" :style="{height: height}">
        <slot></slot>
      </view>
    </block>
  </view>
</template>

<script>
const timeout = 30
let timer = null, time = timeout
export default {
  data() {
    return {
      showPage: false,
      error: false
    }
  },
  created() {
    this.timing()
  },
  props: {
    // 是否显示内容
    show: {
      type: [Boolean, Object],
      default: false
    },
    // 加载图片
    icon: {
      type: String,
      default: 'https://files.yzsheng.com/client/imgs/loading.gif'
    },
    // 是否淡出内容
    animation: {
      type: Boolean,
      default: true
    },
    // 提示文字
    text: {
      type: String,
      default: ''
    },
    // 高度
    height: {
      type: String,
      default: ''
    },
    // 模式 使用v-if 还是v-show
    mode: {
      type: String,
      default: 'show'
    }
  },
  watch: {
    show(newVal, oldVal){
      if(!this.showPage) {
        setTimeout(() => {
          this.showPage = newVal
        }, 300)
      }
      if(newVal) {
        clearInterval(timer)
      }
    }
  },
  methods: {
    // 计时
    timing() {
      timer = setInterval(() => {
        if(time <= 1) {
          this.error = true
          time = timeout
          clearInterval(timer)
        } else {
          time--
        }
      }, 1000)
    },
    // 点击重试
    onRetry() {
      // this.timing()
      // this.error = false
      let pages = getCurrentPages()
      let current = pages[pages.length - 1]
      let url = current.route
      if (JSON.stringify(current.options) != '{}') {
        url += this.$u.queryParams(current.options)
      }
      if (['pages/index/index', 'pages/store/store', 'pages/friend/friend', 'pages/orderCenter/orderCenter', '/pages/me/me'].indexOf(url) > -1) {
        uni.reLaunch({
          url: `/${url}`
        });
      } else {
        uni.redirectTo({
          url: `/${url}`
        });
      }
      this.$emit('retry')
    }
  }
}
</script>

<style lang="scss">
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-loading{
  .loading{
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon{
      width: 300rpx;
      height: 100rpx;
    }
    .text{
      color: #666;
      font-size: 26rpx;
    }
    .btn-retry{
      height: 60rpx;
      display: flex;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      color: #3D3D3D;
      font-size: 28rpx;
      margin-top: 60rpx;
      border-radius: 8rpx;
      width: 200rpx;
    }
  }
  .flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .show{
    animation: fadeIn .3s forwards;
  }
}
</style>
